<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2022/3/5
  Time: 18:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="robots" content="noindex, follow"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, follow"/>
    <!--All Css Here-->

    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/static/moban/css/bootstrap.min.css">
    <!-- Linearicon CSS-->
    <link rel="stylesheet" href="/static/moban/css/linearicons.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/static/moban/css/font-awesome.min.css">

    <!-- Animate CSS-->
    <link rel="stylesheet" href="/static/moban/css/animate.css">
    <!-- Owl Carousel CSS-->
    <link rel="stylesheet" href="/static/moban/css/owl.carousel.min.css">
    <!-- Slick CSS-->
    <link rel="stylesheet" href="/static/moban/css/slick.css">
    <!-- Meanmenu CSS-->
    <link rel="stylesheet" href="/static/moban/css/meanmenu.min.css">
    <!-- Easyzoom CSS-->
    <link rel="stylesheet" href="/static/moban/css/easyzoom.css">
    <!-- Venobox CSS-->
    <link rel="stylesheet" href="/static/moban/css/venobox.css">
    <!-- Jquery Ui CSS-->
    <link rel="stylesheet" href="/static/moban/css/jquery-ui.css">
    <!-- Nice Select CSS-->
    <link rel="stylesheet" href="/static/moban/css/nice-select.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="/static/moban/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/moban/css/responsive.css">
    <!-- Modernizr Js -->
    <script src="/static/moban/js/vendor/modernizr-2.8.3.min.js"></script>


    <link rel="stylesheet" href="/static/css/review.css">

    <script src="/static/js/utile.js"></script>


    <style>
        .right-icon {
            margin-top: 22px;
        }

        .search-dropdown > form {
            margin-bottom: 0;
        }

        .product-action > ul > li > a {
            height: 30px;
            margin-top: 15px;
        }

        #main-product img {
            height: 270px;
        }

        .product-box {
            float: left;
        }

        .img-div {
            width: 90px;
            height: 85px;

            margin-left: 5px;
            float: left;

        }

        .img-div img {
            width: 80px;
            height: 80px;
            border: 1px solid #d4d4d4;
        }

        #single-product-menu {
            width: 380px;
            height: 84px;
            /*border: 1px red solid;*/
            overflow: hidden;
        }

        #product-img {
            height: 375px;
            width: 375px;
        }

        .product-large-thumb img {
            width: 470px;
            height: 470px;
        }

        .product-details-img img {
            width: 68px;
            height: 68px;
        }

        .related-img {
            width: 270px;
            height: 270px;
        }

        .related-img {
            padding-right: 15px;
            padding-left: 15px;
            margin-top: 5px;
        }

        .category-name {
            cursor: pointer;
        }


    </style>
</head>
<body>


<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<div class="wrapper">
    <!--Header Area Start-->
    <header>
        <div class="header-container">
            <div class="header-area header-absolute header-sticky pt-30 pb-30">
                <div class="container-fluid pl-50 pr-50">
                    <div class="row">
                        <!--Header Logo Start-->
                        <div class="col-lg-3 col-md-3">
                            <div class="logo-area">
                                <a href="/page/index.jsp">
                                    <img src="/static/moban/img/logo/logo.png" alt="">
                                </a>
                            </div>
                        </div>
                        <!--Header Logo End-->
                        <!--Header Menu And Mini Cart Start-->
                        <div class="col-lg-9 col-md-9 text-lg-right">
                            <!--Main Menu Area Start-->
                            <div class="header-menu">
                                <nav>
                                    <ul class="main-menu">
                                        <li><a href="/page/index.jsp">首 页</a></li>
                                        <li><a href="shop.html">商品</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <!--Main Menu Area End-->
                            <!--Header Option Start-->
                            <div class="header-option">
                                <div class="mini-cart-search">
                                    <div class="mini-cart">
                                        <a href="/shop/car?id=${sessionScope.User.id}">
                                                <span class="cart-icon">
                                                   <span class="cart-quantity">2</span>
                                                </span>
                                            <span class="cart-title">购物车 <br><strong>$190.00</strong></span>
                                        </a>
                                    </div>
                                    <div class="header-search">
                                        <div class="search-box">
                                            <a href="#" class="right-icon"><i class="fa fa-search"></i></a>
                                            <div class="search-dropdown">
                                                <form action="#">
                                                    <input name="search" id="search" placeholder=""
                                                           value="Search product..."
                                                           onblur="if(this.value==''){this.value='Search product...'}"
                                                           onfocus="if(this.value=='Search product...'){this.value=''}"
                                                           type="text">
                                                    <button type="submit"><i class="fa fa-search"></i></button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="currency">
                                        <div class="currency-box">
                                            <a href="#" class="right-icon"><i class="fa fa-th"></i></a>
                                            <div class="currency-dropdown">
                                                <input type="hidden" id="userId" value="${sessionScope.User.id}">
                                                <ul class="menu-top-menu">
                                                    <li><a href="/shop/centre">账户名:${sessionScope.User.name}</a></li>
                                                    <li><a href="#">收藏夹</a></li>
                                                    <li><a href="/shop/car?id=${sessionScope.User.id}">购物车</a></li>

                                                    <c:if test="${sessionScope.User.id != null}">
                                                        <li><a href="#">退出登录</a></li>
                                                    </c:if>

                                                    <c:if test="${sessionScope.User == null}">
                                                        <li><a href="#">登录</a></li>
                                                    </c:if>
                                                </ul>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Header Option End-->
                        </div>
                        <!--Header Menu And Mini Cart End-->
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <!--Mobile Menu Area Start-->
                            <div class="mobile-menu d-lg-none"></div>
                            <!--Mobile Menu Area End-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--Header Area End-->
    <!--Breadcrumb One Start-->
    <div class="breadcrumb-one mb-120">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-img">
                        <img src="/static/moban/img/page-banner/product-banner.jpg" alt="">
                    </div>
                    <div class="breadcrumb-content">
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li class="active">商品详情</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Breadcrumb One End-->
    <!--Single Product Area Start-->
    <div class="single-product-area mb-115">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-5">
                    <div class="product-details-img-tab">
                        <!--Product Tab Content Start-->
                        <div class="tab-content single-product-img">
                            <div class="" id="product1">
                                <div class="product-large-thumb img-full">
                                    <div class="easyzoom easyzoom--overlay">
                                        <a href="${goods.img}" id="big-main-img">
                                            <img id="main-img" src="${goods.img}" alt="">
                                            <input type="hidden" value="${goods.id}" id="goodsId">
                                        </a>

                                    </div>
                                </div>
                            </div>


                        </div>
                        <!--Product Tab Content End-->
                        <!--Product Tab Menu Start-->
                        <div class="product-menu">
                            <div class="nav product-tab-menu">
                                <div class="product-details-img">
                                    <a class="active" data-toggle="tab" href="#product1"><img src="${goods.img}" alt=""
                                                                                              onclick="alertMainImg(this)"></a>
                                </div>
                                <c:forEach items="${img}" var="item">
                                    <div class="product-details-img">
                                        <a data-toggle="tab"><img src="${item.url}" alt=""
                                                                  onclick="alertMainImg(this)"></a>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                        <!--Product Tab Menu End-->
                    </div>
                </div>
                <div class="col-md-12 col-lg-7">
                    <!--Product Details Content Start-->
                    <div class="product-details-content">
                        <h2>${goods.name}</h2>
                        <div class="single-product-reviews">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star-o"></i>
                            <a class="review-link" href="#">(${commentNum} 条评论)</a>
                        </div>
                        <div class="single-product-price">
                            <span class="regular-price">${goods.price}元</span>
                        </div>
                        <div class="product-description">
                            <p>${goods.information}</p>
                        </div>
                        <p class="stock in-stock">剩余 ${goods.number} 个商品</p>
                        <div class="single-product-quantity">
                            <div class="add-quantity">
                                <div class="product-quantity">
                                    <input id="number" class="number" value="1" type="number">
                                </div>
                                <div class="add-to-link">
                                    <button class="product-btn" data-text="add to cart"
                                            onclick="addCart_Main(${goods.id})">加入购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="wishlist-compare-btn">
                            <a href="#" class="wishlist-btn">加入收藏夹</a>
                        </div>
                        <div class="product-meta">
                                <span class="posted-in">
                                        商品种类:
		                                <c:forEach var="item" items="${goods.categoryList}">
                                            <a class="category-name">${item.name}</a>,
                                        </c:forEach>
		                            </span>
                        </div>
                        <div class="single-product-sharing">
                            <h3>分享商品</h3>
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <!--Product Details Content End-->
                </div>
            </div>
        </div>
    </div>
    <!--Single Product Area End-->
    <!--Product Description Review Area Start-->
    <div class="product-description-review-area mb-100">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-review-tab">
                        <!--Review And Description Tab Menu Start-->
                        <ul class="nav dec-and-review-menu">
                            <li>
                                <a class="active" data-toggle="tab" href="#description">商品描述</a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#reviews">评论： (共${commentNum}条)</a>
                            </li>
                        </ul>
                        <!--Review And Description Tab Menu End-->
                        <!--Review And Description Tab Content Start-->
                        <div class="tab-content product-review-content-tab" id="myTabContent-4">
                            <div class="tab-pane fade active show" id="description">
                                <div class="single-product-description">
                                    <p>
                                        <c:if test="${goods.description == null}">
                                            此商品暂无信息描述！！！！
                                        </c:if>

                                        <c:if test="${goods.description != null}">
                                            ${goods.description}
                                        </c:if>
                                    </p>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="reviews">
                                <div class="paging_container">
                                    <ul class="paging_list"></ul>
                                </div>
                                <div class="paging_content">
                                    <div class="paging_first">首页</div>
                                    <div class="paging_up">上一个</div>
                                    <div class="paging_btn"></div>
                                    <div class="paging_down">下一个</div>
                                    <div class="paging_last" id="">尾页</div>
                                </div>
                            </div>
                        </div>
                        <!--Review And Description Tab Content End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Product Description Review Area Start-->
    <!--Also Like Product Start-->
    <div class="also-like-product">
        <div class="container">
            <div class="row">
                <!--Section Title Start-->
                <div class="col-12">
                    <div class="section-title text-center mb-35">
                        <h3>你可能喜欢…</h3>
                    </div>
                </div>
                <!--Section Title End-->
            </div>
            <div class="row">
                <div class="product-slider-active">
                    <c:forEach var="item" items="${randGoods}">
                        <div class="col-xs-12 releat-product">
                            <!--Single Product Start-->
                            <div class="single-product mb-25">
                                <div class="product-img img-full ">
                                    <a href="/Goods/product?id=${item.id}">
                                        <img class="related-img" src="/myimg/${item.img}" alt="">
                                    </a>
                                    <div class="product-action">
                                        <ul>
                                            <li><a href="#open-modal" data-toggle="modal" title="Quick view"
                                                   onclick="getShopInfo(${item.id})"><i class="fa fa-search"></i></a>
                                            </li>
                                            <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                            <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h2><a href="/Goods/product?id=${item.id}">${item.name}</a></h2>
                                    <div class="product-price">
                                        <div class="price-box">
                                            <span class="regular-price">${item.price}元</span>
                                        </div>
                                        <div class="add-to-cart">
                                            <a onclick="addCartOne(${item.id})">加入购物车</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Single Product End-->
                        </div>
                    </c:forEach>

                </div>
            </div>
        </div>
    </div>
    <!--Also Like Product End-->
    <!--Related Product Start-->
    <div class="Related-product mt-105 mb-100">
        <div class="container">
            <div class="row">
                <!--Section Title Start-->
                <div class="col-12">
                    <div class="section-title text-center mb-35">
                        <h3>相关商品</h3>
                    </div>
                </div>
                <!--Section Title End-->
            </div>
            <div class="row">
                <div class="product-slider-active">
                    <c:forEach var="item" items="${related}">
                        <div class="col-xs-12 releat-product">
                            <!--Single Product Start-->
                            <div class="single-product mb-25">
                                <div class="product-img img-full ">
                                    <a href="/Goods/product?id=${item.id}">
                                        <img class="related-img" src="/myimg/${item.img}" alt="">
                                    </a>
                                    <div class="product-action">
                                        <ul>
                                            <li><a href="#open-modal" data-toggle="modal" title="Quick view"
                                                   onclick="getShopInfo(${item.id})"><i class="fa fa-search"></i></a>
                                            </li>
                                            <li><a href="#" title="Whishlist"><i class="fa fa-heart-o"></i></a></li>
                                            <li><a href="#" title="Compare"><i class="fa fa-refresh"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product-content">
                                    <h2><a href="/Goods/product?id=${item.id}">${item.name}</a></h2>
                                    <div class="product-price">
                                        <div class="price-box">
                                            <span class="regular-price">$${item.price}</span>
                                        </div>
                                        <div class="add-to-cart">
                                            <a onclick="addCartOne(${item.id})">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Single Product End-->
                        </div>
                    </c:forEach>

                </div>
            </div>
        </div>
    </div>
    <!--Related Product End-->
    <!--Brand Area Start-->
    <div class="brand-area mb-105">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="brand-active">
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand1.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand2.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand3.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand4.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand5.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand3.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand4.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                        <!--Single Brand Start-->
                        <div class="single-brand img-full">
                            <a href="#"><img src="/static/moban/img/brand/brand5.png" alt=""></a>
                        </div>
                        <!--Single Brand End-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Brand Area End-->
    <!--Footer Area Start-->
    <footer>
        <div class="footer-container">
            <!--Footer Top Area Start-->
            <div class="footer-top-area black-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>My Account</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Team Member</a></li>
                                    <li><a href="#">Career</a></li>
                                    <li><a href="#">Specials</a></li>
                                    <li><a href="shop.html">Best sellers</a></li>
                                    <li><a href="#">Our stores</a></li>
                                    <li><a href="#">Contact us</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Information</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                    <li><a href="#">My orders</a></li>
                                    <li><a href="#">Terms & Conditions</a></li>
                                    <li><a href="#">Returns & Exchanges</a></li>
                                    <li><a href="#">Shipping & Delivery</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Quick Links</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">Support Center</a></li>
                                    <li><a href="#">Term & Conditions</a></li>
                                    <li><a href="#">Shipping</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                    <li><a href="#">Help</a></li>
                                    <li><a href="#">Products Return</a></li>
                                    <li><a href="#">FAQS</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Categories</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">Bedroom</a></li>
                                    <li><a href="#">Furniture</a></li>
                                    <li><a href="#">Livingroom</a></li>
                                    <li><a href="#">Mobiles & Tablets</a></li>
                                    <li><a href="#">Men</a></li>
                                    <li><a href="#">Women</a></li>
                                    <li><a href="#">Accessories</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Top Area End-->
            <!--Footer Middle Area Start-->
            <div class="footer-middle-area black-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-logo">
                                    <a href="index.html"><img src="/static/moban/img/logo/logo-footer.png" alt=""></a>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-home"></i>
                                    </div>
                                    <p>Address : No 40 Baria Sreet 15/2 NewYork City, NY, United States.</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-envelope-open-o"></i>
                                    </div>
                                    <p>Email: <br>info@yourmail.com</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-mobile"></i>
                                    </div>
                                    <p>Phone: <br>(+68) 123 456 7890</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Middle Area End-->
            <!--Footer Bottom Area Start-->
            <div class="footer-bottom-area black-bg pt-50 pb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!--Footer Payment Start-->
                            <div class="footer-payments-image">
                                <img src="/static/moban/img/payment/payment-icon.png" alt="">
                            </div>
                            <!--Footer Payment End-->
                            <!--Footer Menu Start-->
                            <div class="footer-menu text-center">
                                <nav>
                                    <ul>
                                        <li><a href="#">Site Map</a></li>
                                        <li><a href="#">Search Terms</a></li>
                                        <li><a href="#">Advanced Search</a></li>
                                        <li><a href="#">Orders and Returns</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <!--Footer Menu End-->
                            <!--Footer Copyright Start-->
                            <div class="footer-copyright">
                                <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                                             href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                                </p>
                            </div>
                            <!--Footer Copyright End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Bottom Area End-->
        </div>
    </footer>
    <!--Footer Area End-->
    <!-- Modal Area Strat -->
    <div class="modal fade" id="open-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
                            class="fa fa-close"></i></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!--Modal Img-->
                        <div class="col-md-5">
                            <!--Modal Tab Content Start-->
                            <div class="tab-content product-details-large" id="myTabContent">
                                <div class="tab-pane fade show active" id="single-slide1" role="tabpanel"
                                     aria-labelledby="single-slide-tab-1">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product1.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide2" role="tabpanel"
                                     aria-labelledby="single-slide-tab-2">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product2.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide3" role="tabpanel"
                                     aria-labelledby="single-slide-tab-3">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product3.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide4" role="tabpanel"
                                     aria-labelledby="single-slide-tab-4">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product4.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide5" role="tabpanel"
                                     aria-labelledby="single-slide-tab-4">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product5.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                                <div class="tab-pane fade" id="single-slide6" role="tabpanel"
                                     aria-labelledby="single-slide-tab-4">
                                    <!--Single Product Image Start-->
                                    <div class="single-product-img img-full">
                                        <img src="/static/moban/img/single-product/large/single-product6.jpg" alt="">
                                    </div>
                                    <!--Single Product Image End-->
                                </div>
                            </div>
                            <!--Modal Content End-->
                            <!--Modal Tab Menu Start-->
                            <div class="single-product-menu">
                                <div class="nav single-slide-menu owl-carousel" role="tablist">
                                    <div class="single-tab-menu img-full">
                                        <a class="active" data-toggle="tab" id="single-slide-tab-1"
                                           href="#single-slide1"><img
                                                src="/static/moban/img/single-product/small/single-product1.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-2" href="#single-slide2"><img
                                                src="/static/moban/img/single-product/small/single-product2.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-3" href="#single-slide3"><img
                                                src="/static/moban/img/single-product/small/single-product3.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-4" href="#single-slide4"><img
                                                src="/static/moban/img/single-product/small/single-product4.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-5" href="#single-slide5"><img
                                                src="/static/moban/img/single-product/small/single-product5.jpg" alt=""></a>
                                    </div>
                                    <div class="single-tab-menu img-full">
                                        <a data-toggle="tab" id="single-slide-tab-6" href="#single-slide6"><img
                                                src="/static/moban/img/single-product/small/single-product6.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <!--Modal Tab Menu End-->
                        </div>
                        <!--Modal Img-->
                        <!--Modal Content-->
                        <div class="col-md-7">
                            <div class="modal-product-info">
                                <h1>Sit voluptatem</h1>
                                <div class="modal-product-price">
                                    <span class="old-price">$74.00</span>
                                    <span class="new-price">$69.00</span>
                                </div>
                                <a href="single-product.html" class="see-all">See all features</a>
                                <div class="add-to-cart quantity">
                                    <form class="add-quantity" action="#">
                                        <div class="modal-quantity">
                                            <input class="number" type="number" value="1">
                                        </div>
                                        <div class="add-to-link">
                                            <button class="form-button" data-text="add to cart">add to cart</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="cart-description">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation ullamco,Proin lectus ipsum, gravida et mattis vulputate,
                                        tristique ut lectus.</p>
                                </div>
                                <div class="social-share">
                                    <h3>Share this product</h3>
                                    <ul class="socil-icon2">
                                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                                        <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href=""><i class="fa fa-linkedin"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--Modal Content-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Area End -->
</div>


<!--All Js Here-->

<!--Jquery 1.12.4-->
<script src="/static/moban/js/vendor/jquery-1.12.4.min.js"></script>
<!--Popper-->
<script src="/static/moban/js/popper.min.js"></script>
<!--Bootstrap-->
<script src="/static/moban/js/bootstrap.min.js"></script>
<!--Imagesloaded-->
<script src="/static/moban/js/imagesloaded.pkgd.min.js"></script>
<!--Isotope-->
<script src="/static/moban/js/isotope.pkgd.min.js"></script>
<!--Waypoints-->
<script src="/static/moban/js/waypoints.min.js"></script>
<!--Counterup-->
<script src="/static/moban/js/jquery.counterup.min.js"></script>
<!--Carousel-->
<script src="/static/moban/js/owl.carousel.min.js"></script>
<!--Slick-->
<script src="/static/moban/js/slick.min.js"></script>
<!--Meanmenu-->
<script src="/static/moban/js/jquery.meanmenu.min.js"></script>
<!--Easyzoom-->
<script src="/static/moban/js/easyzoom.min.js"></script>
<!--Nice Select-->
<script src="/static/moban/js/jquery.nice-select.min.js"></script>
<!--ScrollUp-->
<script src="/static/moban/js/jquery.scrollUp.min.js"></script>
<!--Wow-->
<script src="/static/moban/js/wow.min.js"></script>
<!--Venobox-->
<script src="/static/moban/js/venobox.min.js"></script>
<!--Jquery Ui-->
<script src="/static/moban/js/jquery-ui.js"></script>
<!--Countdown-->
<script src="/static/moban/js/jquery.countdown.min.js"></script>
<!--Plugins-->
<script src="/static/moban/js/plugins.js"></script>
<!--Main Js-->
<script src="/static/moban/js/main.js"></script>


<script src="/static/js/goods.js"></script>
<script src="/static/js/jquery-paging.js"></script>


<script>

    $(function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:9095/GetComment?goodsId=" + $("#goodsId").val(),
            dataType: "json",
            success: function (data) {
                $.each(data, function (k, v) {
                    console.log(k);
                    console.log(v);

                    $(".paging_container").children("ul").append("<li><div class='img'><img src='/myimg/" + v.user.photo + "'></div></li>")
                    $(".paging_container").children("ul").find("li:eq(" + k + ")").append(("<div class='box'></div>"));
                    $(".paging_container").children("ul").find("li:eq(" + k + ") .box").append(("<h1>" + v.user.name + "</h1>"));
                    $(".paging_container").children("ul").find("li:eq(" + k + ") .box").append(("<p class='time'>" + formatDate(v.addtime) + "</p>"));
                    $(".paging_container").children("ul").find("li:eq(" + k + ") .box").append(("<p class='text'>" + v.content + "</p>"));
                })
                $(".paging_list").paging({
                    PageNum: 5, //每页显示数目
                    pageMax: true, //按钮长度是否显示
                    pageMaxHideShow: true, //在最后一个的时候是否隐藏按钮长度
                    pageDownUpHide: true, //到第一个或最后一个是否让上一页或下一页消失
                    pageInput: true, //是否使用文本框输入跳转
                    pagingBtnHide: false, //是否让按钮变为一个
                    pagingBtnPaging: true,//按钮是否分页
                    pagingDisplay: "flex", //显示的属性，弹性盒子还是块化
                })
            },
        })
    })


    function alertMainImg(img) {
        // console.log(img.src);

        $("#main-img").attr("src", img.src);
        $("#big-main-img").attr("href", img.src);
    }


</script>
</body>
</html>


